<template>
    <div class="detail page" :class="{bgw:!list.length}">
        <formHeader :title="'抽奖明细'"></formHeader>
      <span class="" style="font-size: 20px" v-if="!list&&list.length==0">没有抽奖次数,或者登录错账号请核实</span>
        <div class="con">
            <cube-scroll
                    ref="scroll"
                    :options="options">
                <div class="items">
                    <div class="item" v-for="item in list" :key="item.id">
                        <div class="title">
                            <img src="./image/home.png" alt="">
                            <div>{{item.shopName||'社集优选旗舰店'}}</div>
                        </div>
                        <div class="desc" v-for="(goodsItem,index) in item.orderName.split('&&').filter(item=>item)" :key="index">
                            <div class="name">{{goodsItem.split('*')[0]}}</div>
                            <div class="num">x{{goodsItem.split('*')[1]}}</div>
                            <div class="price">{{index==0?('¥'+item.price):''}}</div>
                        </div>
                        <div class="tips">
                            <div class="cell">待抽奖次数：<span>{{item.isLottery?0:1}}次</span></div>
                            <div class="cell" v-if="item.goodsName">获得奖项：<span>{{item.goodsName}}</span></div>
                        </div>
                        <div class="btn">
                            <div class="cell" :class="{gray:item.isLottery}" @click="toLottery(item.actId,item.id,item.isLottery)">{{item.isLottery?'已抽奖':'去抽奖'}}</div>
                            <div class="cell" v-if="item.isLottery" :class="{gray:!item.isLottery||item.status}" @click="getPresent(item.bandGoodsId,item.id,item.status)">{{item.status?'已领奖':'去领奖'}}</div>
                            <div class="cell" v-if="item.status" @click="turn('/orderdetail?id='+item.orderId)">查看领奖记录</div>
                        </div>
                    </div>
<!--                    <img v-if="!list.length" src="./image/empty.png" alt="" class="empty" style="width: 100%;margin-top: 140px">-->
<!--                    <div v-if="list.length" class="info">“获得抽奖机会点击获取机会去看看吧~”</div>-->
<!--                    <div class="getChance" @click="turn('/goodslist?type=0&saletype=2')">去获取机会</div>-->
                    <div style="width: 100%;height: 50px"></div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getLotteryInfo,getPresent} from '@/api/lottery'

    export default {
        name: "detail",
        components: {formHeader},
        data(){
            return{
                options:{
                    pullUpLoad:true
                },
                list:[]
            }
        },
        mounted() {
            getLotteryInfo().then(res=>{
                this.list = res.data
            })
        },
        methods:{
            turn(path){
                this.$router.push({path})
            },
            toLottery(actId,recordId,flag){
                if (flag){return}
                this.$router.push({
                    path:'/lottery',
                    query:{actId,recordId}
                })
            },
            getPresent(goodsId,recordId,flag){
                if (flag){return}
                getPresent(goodsId).then(res=>{
                    this.$router.push({
                        path:'/lottery/redeem?recordId='+recordId
                    })
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.bgw
    background-color: #fff
.detail
    background-color: #F4F3F3;

    /deep/ .header
        background-color: #00d6c0

    .con
        margin-top 47px
        padding 9px 12px
        height 100%
        .item
            background-color: #fff
            padding 10px 4px
            border-radius 10px
            margin-bottom 10px
            .title
                display flex
                color #333
                font-size 16px
                align-items center
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                img
                    width: 22px
                    height: 22px
                    margin-right 4px
            .desc
                display flex
                margin-top 10px
                align-items center
                /*justify-content space-between*/
                color #333
                font-size 14px
                padding 0 4px
                .name
                    width: 212px
                    line-height 18px
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                .num
                    width 45px
                    text-align right
                .price
                    flex 1
                    text-align right
            .tips
                display flex
                align-items center
                padding 0 4px
                margin-top 15px
                color #333
                font-size 14px
                .cell
                    margin-right 30px
                    span
                        color #00d6c0
            .btn
                display flex
                justify-content space-around
                padding 0 4px
                margin-top 30px
                .cell
                    height 23px
                    padding 0 14px
                    text-align center
                    line-height 23px
                    color #fff
                    font-size 14px
                    background-color: #00d6c0
                    border-radius 2.5px
                .gray
                    background-color: #b8b8b8

        .info
            font-size 12px
            color #c8c8c8
            text-align center
            margin 0 auto
            margin-top 43px
        .getChance
            width 100px
            height 30px
            margin 0 auto
            color #fff
            background-color: #00d6c0
            line-height 30px
            text-align center
            font-size 15px
            border-radius 2.5px
            margin-top 30px


</style>
